

<!DOCTYPE html><html><head><meta charset="utf-8"><link rel="Shortcut Icon" href="http://htmljs.b0.upaiyun.com//images/logo.ico?123"><link href="http://htmljs.b0.upaiyun.com//images/logo.ico?123" rel="shortcut icon" type="image/x-icon"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable = no"/>
<link href="http://htmljs.b0.upaiyun.com//images/icon.png" rel="apple-touch-icon"/>
<meta name="keywords" content="前端, 前端开发, web前端, web前端开发, 前端开发工程师, 前端开发攻城师,设计, 开发, 前端资源, CSS, JavaScript, Ajax, jQuery, html,html5,css3,浏览器兼容, 前端开发工具, 前端招聘, jQuery API, CSS整形和优化工具 , JS压缩工具 , JS格式化工具 , CSS参考手册 ,HTML参考手册 , 多重搜索 , nodejs , node , boostrap , sublime"/>
<script>if($.browser.msie){alert("请不要使用ie浏览本站！本站不支持ie10以下浏览器。")}</script><title>乱炖周刊第7期 - 每周为您推送本站精选的新鲜速递</title><base target="_blank"/><meta name="description" content="前端乱炖每周会为您推送本站精选的新鲜速递。">
<style>
img{
  max-width:100%;
}
p{
  margin:10px 0;
}
a{
  text-decoration: none;
  color:#56b38e;
}
html,body{margin:0;background: #fefefe;font-size: 14px;color:#444;}
*{
   font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;;
}
a:hover{
  text-decoration: underline;
}
@media screen and (min-width:100px) and (max-width:650px){
  table{
    width:100% !important;
  }
  body{
    margin:0 5px;
  }
  .wrapper,.tip,.title{width:100% !important;overflow: hidden;}
  #googlead{display: none !important;}
  #wx img{width:50%;}
  #WBCommentFrame{
    display: none;
  }
    .job .user{
        display:none !important;
    }
    .articles .title span{display:none !important;}
}
.job{background:#fff;overflow:hidden;}.job .title{background:#fff;padding:5px 10px;font-size:14px;line-height:30px;}
.job .title img{width:30px;height:30px;border-radius:50px;}
.job .title .headpic{float:right;}
.job .con{padding:10px;line-height:25px;background:#f7f7f7;}.job .con .item{margin-right:10px;display:inline-block;font-size:13px;}.job .con .item .key{color:#666;}
.job .con .item .value{color:#999;}
.job .con .count em{color:#999;margin-right:10px;}
.job .user .nick{float:left;font-size:14px;line-height:50px;margin:10px;}
</style>
</head>

<body>
  <div style="height:40px;background:#eee;color:#fff;line-height:40px;border-bottom:1px solid #ccc;margin:0 -5px;">
    <div style="width: 600px;margin:0 auto;" class="wrapper">
      <a href="http://www.html-js.com" style="color:#333;">前端乱炖官网</a>
      <a href="http://www.html-js.com/static/htmljs-weekly-6.html" style="padding:0 10px;color:#333;">上一期</a>
    </div>
  </div>
  <div id="newsletter" style="margin:0;padding:0; color: #333333; font: 13px/20px 'Helvetica Neue',Helvetica,Arial,Sans-serif;font-family:'Hiragino Sans GB','Microsoft YaHei','Helvetica Neue',Helvetica,Arial,sans-serif!important;overflow:hidden;" >
    <div class="wrapper" style="margin: 0px auto 0; width: 600px; padding-top:16px; padding-bottom:10px;">
      <div class="header clearfix" style="font-weight:bold;text-align:left;margin:10px 0;margin-top:20px;font-size:35px;color:#333;padding:0px;line-height: 43px;height:43px;">乱<img alt="炖" width="40" height="40" style="vertical-align: middle;margin-top:-8px;margin-left:5px;margin-right:5px;" src="http://htmljs.b0.upaiyun.com/uploads/1411395057234-%E6%9C%AA%E6%A0%87%E9%A2%98-4.png"/>周刊 第七期</div>
      <div style="color:#999;font-size:12px;padding-left:0px;line-height:45px;">主编：芋头</div>
      <a href="http://www.imooc.com/wenda/detail/39403?from=luandun" target="_blank" style="display:block;max-height:100px;"><img alt="畅谈“我与慕课网” IT好书随心选" src="http://htmljs.b0.upaiyun.com/uploads/1412002585277-600x100.jpg" style="display:block;"/></a>
      <a href="http://www.html-js.com/topic/827" target="_blank">广告投放指南</a>
        <div style="">
        <div style="padding:0px;">
          <p style="font-size:13px;color:#666;">乱炖周刊 是 <a href="http://www.html-js.com" target="_blank">前端乱炖</a> 网站推出的前端技术信息推送产品。我们会每周为您提供最新最有含量的内容推送，如果您有兴趣，欢迎订阅周刊。
          </p>
          <div style="float:left;margin-right:40px;">
          <p style="font-size:14px;margin-top:20px;color:#489275">订阅 乱炖周刊：</p>
          <p style="font-size:13px;">
            <input type="text" id="email" name="email" placeholder="输入常用邮箱地址" style="height:20px;width:200px;"/>
            <button id="submit" type="button" style="height:25px;vertical-align:1px;">订阅</button>
          </p>
        </div>
        <div style="float:left;">
          <p style="font-size:14px;margin-top:20px;color:#489275;">推荐给朋友：</p>

          <p style="font-size:13px;">
            <a href="http://service.weibo.com/share/share.php?appkey=659341943&url=http://www.html-js.com/static/htmljs-weekly-7.html&pic=http://htmljs.b0.upaiyun.com/uploads/1412041000769-Snip20140930_17.png&title=《乱炖周刊》第7期新鲜出炉啦，《乱炖周刊》是@前端乱炖 网站推出的前端精品文章推送产品，每周为您多渠道推送营养文，前端必备，推荐订阅。戳右边查看在线版→_→" target="_blank" title="分享到微博"><img src="http://htmljs.b0.upaiyun.com/uploads/1393254783476-button1.png" style="width:110px;margin-left:-8px;margin-top:-3px;"/>
            </a>
          </p>
        </div>
        </div>
      </div>
    </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品原创专栏</div>

  <div id="newsletter" >
      <div style="background: #f8f8db;font-size: 13px;width:600px;margin:0 auto;margin-top: 5px;color:#666;" class="tip"><div style="padding:10px;">每个乱炖专栏都是一系列原创文章的合集，我们希望能够提供一个展示和分享的平台，同时也让初学者能够系统学习前端知识。感谢每位作者的辛勤付出、无私奉献！</div></div>
  <div style="margin: 0px auto 0; width: 600px;"  class="wrapper">

    <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
        <a href="http://www.html-js.com/article/column/221" style="color:#444;">Lai space（6）</a>
    </div>
    <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">一些作者的点滴分享，我们鼓励这种日常分享，由小见大，由浅入深，贴近生活。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/18" style="color:#444;">测试驱动开发实践（10）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">本站几个精品专栏一直，作者也是国内前端测试领域的专家，在这方面有很多实践和研究，这系列文章直接用例子开始讲前端测试，值得一看！</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/222" style="color:#444;">Css研究（9）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下，暂定就这么多，纯粹的爱好者。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/210" style="color:#444;">读懂jQuery（6）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">用了这么久jQuery了，想看看到底jQuery怎么写的，为什么这么牛呢。本栏解读的版本为1.8.1，本人（小Y）才疏学浅，如有疏漏、错误之处，还望各位大牛雅正。</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/234" style="color:#444;">avalon学习教程（20）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">从零开始学习到掌握当前国内最强大的MVVM框架avalon</div>
      <div class="title" style="font-size:20px;line-height:30px;padding-top:20px;">
          <a href="http://www.html-js.com/article/column/30" style="color:#444;">每天学点javascript（44）</a>
      </div>
      <div style="color:#777;font-size:13px;padding:0px;margin:10px 0;margin-top:5px;">javascript进阶级教程，循序渐进掌握javascript</div>

    <a href="http://www.html-js.com/article" style="line-height:30px;font-size:12px;color:#333;text-decoration:underline;">创建我自己的专栏</a>
  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·精品站内原创文章</div>

  <div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper articles">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
        <a href="http://www.html-js.com/article/Laispace-translate-ES6-Generators-1-based-on-papers" style="display:inline-block;width:450px;">
            [ ES6 Generators（1）基础篇 ]
        </a>
        <span style="display:inline-block;font-size:14px;float:right;">  by 赖小赖小赖</span>
    </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Laispace-translate-ES6-Generators-2-indepth-article" style="display:inline-block;width:350px;">
              [ ES6 Generators（2）深入篇 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 赖小赖小赖</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Laispace-translate-ES6-Generators-3-of-asynchronous-discourse" style="display:inline-block;width:350px;">
              [ ES6 Generators（3）异步篇 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 赖小赖小赖</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on" style="display:inline-block;width:450px;">
              [ css3：border-image边框图像详解（上） ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by DO1路人乙</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Test-driven-development-practice" style="display:inline-block;width:450px;">
              [ angularjs测试驱动的mobile端城市选择控件的开发（一） ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by Kinogam</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Laispace-using-textindent-negative" style="display:inline-block;width:450px;">
              [ 慎用text-indent的负值 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 赖小赖小赖</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/Avalon-tutorial-16-step-by-step-do-a-todoMVC" style="display:inline-block;width:450px;">
              [ 一步步做一个todoMVC ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by 司徒正美</span>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a href="http://www.html-js.com/article/CSS-research-on-the-elements-of-the-selector-and-class-selector-rendering-time-to-toss" style="display:inline-block;width:450px;">
              [ 元素选择器和类选择器渲染时间折腾 ]
          </a>
          <span style="display:inline-block;font-size:14px;float:right;">  by DO1路人乙</span>
      </div>

  </div>
</div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·招聘季</div>
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
      <div class="job">
          <div class="title"><a href="/job/93" class="t">在路上旅行App 招聘 web 前端开发工程</a><a href="/user/3125" data-original-title="carlxia" class="headpic user"><img src="http://tp4.sinaimg.cn/1840991347/50/1294584250/1"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">在路上</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">web前端开发</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">12000 - 20000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">100-150</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/92" class="t">天津——高薪急聘——高级前端开发工程师</a><a href="/user/3117" data-original-title="小曾" class="headpic user"><img src="http://tp3.sinaimg.cn/1913121322/50/0/1"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">天津市运信网络科技有限公司</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">WEB前端工程师</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">7000 - 20000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">1-50人</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/90" class="t">在线教育跪求前端高手、肥牛团队、火锅行业，快快灰来。</a><a href="/user/3112" data-original-title="学而思网校招聘" class="headpic user"><img src="http://tp1.sinaimg.cn/5271381488/50/5704593900/0"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">学而思集团网校事业部</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">高级前端</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">15000 - 20000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">200-400</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/88" class="t">【上海】Strikingly团队诚聘前端工程师</a><a href="/user/1297" data-original-title="间隔年ING" class="headpic user"><img src="http://tp1.sinaimg.cn/1859891920/50/5684564358/0"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">Strikingly</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">前端工程师</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">10000 - 20000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">10-20</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span>
              </div>
          </div>
      </div>
      <div class="job">
          <div class="title"><a href="/job/87" class="t">[北京]高级Web前端  coffeescript/jquery/fancybox/requirejs </a><a href="/user/3085" data-original-title="天使汇招聘" class="headpic user"><img src="http://tp2.sinaimg.cn/5291064501/50/5705911695/1"></a></div>
          <div class="con"><span class="item"><span class="key">公司：</span><span class="value">北京天使汇</span></span><span class="item"><span class="key">招聘职位：</span><span class="value">高级Web前端工程师</span></span><span class="item"><span class="key">薪水范围：</span><span class="value">12000 - 20000</span></span>
              <div><span class="item"><span class="key">公司规模：</span><span class="value">50-100</span></span><span class="item"><span class="key">所在城市：</span><span class="value">市辖区</span></span>
              </div>
          </div>
      </div>
  </div>
  <div class="title" style="font-size:14px;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-bottom:1px solid #ddd;line-height:30px;margin-top:20px;padding-left:5px;color:#888;">前端乱炖·业内优秀文章精选</div>
<div id="newsletter" >
  <div style="margin: 0px auto 0; width: 600px;padding-top:20px;" class="wrapper">
    <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
        <a style="font-size:14px;display:inline-block;width:450px;" href="http://www.html-js.com/blog/2544">
            基于 postMessage 和 localStorage 的跨域本地存储方案
        </a>
    </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a style="font-size:14px;display:inline-block;width:450px;" href="http://www.css88.com/archives/5180">
              javascript常用方法函数收集
          </a>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a style="font-size:14px;display:inline-block;width:450px;" href="http://luolei.org/safari-ios8-iphone6-web-developers-designers-chinese/">
              Web开发者和设计师必须要知道的 iOS 8 十个变化
          </a>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a style="font-size:14px;display:inline-block;width:450px;" href="https://github.com/sofish/wechat.js/#readme">
              微信相关的 js 操作：分享、网络、菜单
          </a>
      </div>
      <div class="title" style="font-size:14px;line-height:30px;padding-top:0px;">
          <a style="font-size:14px;display:inline-block;width:450px;" href="http://ued.taobao.org/blog/D2.ticket/">
              2014 D2 前端技术论坛自助报名入口（去看土豪们）
          </a>
      </div>


  </div>
</div>
<div class="title" style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;border-left:4px solid #4e9d7e;margin-top:20px;padding-left:5px;line-height:20px;">微信公众号</div>
    <div style="margin: 0px auto 0; width: 600px;" class="wrapper">
      <img width="250" style="" src="http://htmljs.b0.upaiyun.com/uploads/1394040251862-qrcode.png"/>
      <div style="clear:both;"></div>
    </div>
  </div>
  <div style="font-size:18px;font-weight:bold;margin: 0px auto 0; width: 600px; padding-top:0px; color:#333;margin-top:20px;padding-left:5px;line-height:20px;" class="wrapper">
 <div style="background: none repeat scroll 0 0 #FFFFFF;  margin: 0px 0 0; padding: 20px 0;">
  <p class="title"  style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;"><a href="http://www.html-js.com">@前端乱炖 </a> 是一个功能丰富的提供高质量内容的技术社区</p>
     <p style="border-top:1px solid #ddd;font-size:12px;padding-top:10px;color:#999;" class="title" ><a href="http://www.html-js.com">行业合作请联系QQ：676588498 注明：乱炖合作</p>
<p style="border-top:1px solid #ddd;font-size:12px;padding-top:5px;color:#999;" class="title" >为了确保您能收到及时的通知，请将 postmaster@htmljs.sendcloud.org 添加为联系人。</p>
<script type="text/javascript">
(function(){
var url = "http://widget.weibo.com/distribution/comments.php?width=0&url=auto&border=1&brandline=y&fontsize=12&ralateuid=1734409185&appkey=659341943&dpc=1";
url = url.replace("url=auto", "url=" + encodeURIComponent(document.URL)); 
document.write('<iframe id="WBCommentFrame" src="' + url + '" scrolling="no" frameborder="0" style="width:100%"></iframe>');
})();
</script>
<script src="http://tjs.sjs.sinajs.cn/open/widget/js/widget/comment.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.WBComment.init({
    "id": "WBCommentFrame"
});
</script>
   </div>
  </div>
</div>
   <script src="http://htmljs.b0.upaiyun.com//js/jquery.js"/></script>
<script>
$("#submit").on("click",function(){
  $.ajax({
    url:"/rss/email",
    type:"post",
    data:{email:$("#email").val()},
    dataType:"json",
    success:function(data){
      if(data.success){
        alert("订阅成功")
        $("#email").val("")
      }else{
        alert(data.info)
      }
    }
    });
  });
</script>


<script>

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36222024-3']);
_gaq.push(['_trackPageview']);

(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();</script>
  </body>
</html>